<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #div1{
            width: 600px;
            height: 90px;
            margin: 10px auto;
            border: 1px solid #000;

            background-image: linear-gradient(45deg,
            yellow 0%,
            yellow 25%,
            blue 25%,
            blue 50%,
            red 50%,
            red 75%,
            green 75%,
            green 100%
            );
        }
        #div2{
            width: 600px;
            height: 90px;
            margin: 10px auto;
            border: 1px solid #000;
            
            background-image: linear-gradient(to right,
            #000 0%,
            #000 25%,
            #fff 25%,
            #fff 50%,
            #000 50%,
            #000 75%,
            #fff 75%,
            #fff 100%
            );
        }
        #div3{

            width: 600px;
            height: 90px;
            margin: 10px auto;
             font-size: 5em;  
             font-weight: bold; 
             background: linear-gradient(to right, blue, orange);  
             text-align: center;  
                }

</style>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3">
        <p>中华人民共和国</p>
    </div>

</body>
</html>